﻿@page "/forms/validation"

<Pager Title="Validation" Description="Provide valuable, actionable feedback to your users with HTML5 form validation."
Indicates="@(new[]{"Example","Checked validator","Tooltip feedback","Callbacks"})">
	<Demo Title="Example">
		<Description>
			Use <code>DataAnnotationValidator</code> component inside of <code>Form</code> component to enable the validation.
			<br />
			<code>ValidationFeedback</code> can get the validation feedback from validator dynamiclly.
		</Description>
		<Run>
			<Form Model="this">
				<DataAnnotationsValidator />
				<Row CssClass="Css.Gutter(Num.Three3)">
					<Column Col="Col.Is4">
						<FormInputText @bind-Value="FirstName"/>
						<ValidationFeedback For="()=>FirstName"/>
					</Column>
					<Column Col="Col.Is4">
						<FormInputText @bind-Value="LastName"/>
						<ValidationFeedback For="()=>LastName"/>
					</Column>					
					<Column Col="Col.Is4">
						<FormInputText @bind-Value="UserName"/>
						<ValidationFeedback For="()=>UserName"/>
					</Column>			
					<Column Col="Col.Is8">
						<FormInputText @bind-Value="Address"/>
						<ValidationFeedback For="()=>Address"/>
					</Column>	
					<Column Col="Col.Is4">
						<FormSelect @bind-Value="State">
							<option selected>Choose one state...</option>
							<option value="...">...</option>
						</FormSelect>
						<ValidationFeedback For="()=>State"/>
					</Column>
					<Column Col="Col.Is12">
						
				<FormInputCheckbox @bind-Value="Agree">
					<ValidationFeedback For="()=>Agree"/>
				</FormInputCheckbox>
					</Column>
					<Column Col="Col.Is12">
						<Button Color="Color.Primary" type="submit">Submit Form</Button>
					</Column>
				</Row>
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Form Model=""this"">
<DataAnnotationsValidator />
<Row CssClass=""Css.Gutter(Num.Three3)"">
	<Column Col=""Col.Is4"">
		<FormInputText @bind-Value=""FirstName""/>
		<ValidationFeedback For=""()=>FirstName""/>
	</Column>
	<Column Col=""Col.Is4"">
		<FormInputText @bind-Value=""LastName""/>
		<ValidationFeedback For=""()=>LastName""/>
	</Column>					
	<Column Col=""Col.Is4"">
		<FormInputText @bind-Value=""UserName""/>
		<ValidationFeedback For=""()=>UserName""/>
	</Column>			
	<Column Col=""Col.Is8"">
		<FormInputText @bind-Value=""Address""/>
		<ValidationFeedback For=""()=>Address""/>
	</Column>	
	<Column Col=""Col.Is4"">
		<FormSelect @bind-Value=""State"">
			<option selected>Choose one state...</option>
			<option value=""..."">...</option>
		</FormSelect>
		<ValidationFeedback For=""()=>State""/>
	</Column>
	<Column Col=""Col.Is12"">
		<Button Color=""Color.Primary"" type=""submit"">Submit Form</Button>
	</Column>
</Row>
</Form>
```
```cs
[Display(Name =""User Name"")]
[Required(ErrorMessage =""{0} is required"")]
public string UserName { get; set; }
	
[Display(Name =""First Name"")]
[Required(ErrorMessage =""{0} is required"")]
public string FirstName { get; set; }	

[Display(Name =""Last Name"")]
[Required(ErrorMessage =""{0} is required"")]
public string LastName { get; set; }	

[Display(Name =""Address"")]
[Required(ErrorMessage =""{0} is required"")]
public string Address { get; set; }	
	
[Display(Name =""State"")]
[Required(ErrorMessage =""{0} is required"")]
public string State { get; set; }	

```
			")
		</Code>
	</Demo>
	<Demo Title="Checked validator">
		<Description>
			We customized a new validation 
			attribute <code>CheckedAttribute</code> for <code>FormInputCheckbox</code> component that only 
			validated after checked.
			<br />
			<strong>Put <code>ValidationFeedback</code> to be the child of <code>FormInputCheckbox</code> component that
			can be displayed properly.</strong>
		</Description>
		<Run>
			<Form Model="this">
				<DataAnnotationsValidator/>						
				<FormInputCheckbox @bind-Value="TermConditions">
					<ValidationFeedback For="()=>TermConditions"/>
				</FormInputCheckbox>
				<Button Outline Color="Color.Primary" type="submit">Submit</Button>
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Form Model=""this"">
	<DataAnnotationsValidator/>			
	<FormInputCheckbox @bind-Value=""TermConditions"">
		<ValidationFeedback For=""()=>TermConditions""/>
	</FormInputCheckbox>
	<Button Outline Color=""Color.Primary"" type=""submit"">Submit Form</Button>
</Form>
```
```cs
[Display(Name =""Agree to terms and conditions"")]
[Checked(ErrorMessage =""You must agree before submitting."")]
public bool TermConditions { get; set; }
```
			")
		</Code>
	</Demo>
	<Demo Title="Tooltip feedback">
		<Description>
			Use <code>ValidationTooltip</code> instead of <code>ValidationFeedback</code> to get the validation messages as tooltip.
			<br />
			<strong>
				You have to set <code>Position(Position.Relative)</code> on parent element.
			</strong>
		</Description>
		<Run>
			<Form Model="this">
				<DataAnnotationsValidator />
				<Row CssClass="Css.Gutter(Num.Three3)">
					<Column Col="Col.Is4" CssClass="Css.Class.Position(Position.Relative)">
						<FormInputText @bind-Value="FirstName"/>
						<ValidationTooltip For="()=>FirstName"/>
					</Column>
					<Column Col="Col.Is4" CssClass="Css.Class.Position(Position.Relative)">
						<FormInputText @bind-Value="LastName"/>
						<ValidationTooltip For="()=>LastName"/>
					</Column>					
					<Column Col="Col.Is4" CssClass="Css.Class.Position(Position.Relative)">
						<FormInputText @bind-Value="UserName"/>
						<ValidationTooltip For="()=>UserName"/>
					</Column>			
					<Column Col="Col.Is8" CssClass="Css.Class.Position(Position.Relative)">
						<FormInputText @bind-Value="Address"/>
						<ValidationTooltip For="()=>Address"/>
					</Column>	
					<Column Col="Col.Is4" CssClass="Css.Class.Position(Position.Relative)">
						<FormSelect @bind-Value="State">
							<option selected>Choose one state...</option>
							<option value="...">...</option>
						</FormSelect>
						<ValidationTooltip For="()=>State"/>
					</Column>
					<Column Col="Col.Is12">
						<Button Color="Color.Primary" type="submit">Submit Form</Button>
					</Column>
				</Row>
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Form Model=""this"">
	<DataAnnotationsValidator />
	<Row CssClass=""Css.Gutter(Num.Three3)"">
		<Column Col=""Col.Is4"" CssClass=""Css.Class.Position(Position.Relative)"">
			<FormInputText @bind-Value=""FirstName""/>
			<ValidationTooltip For=""()=>FirstName""/>
		</Column>
		<Column Col=""Col.Is4"" CssClass=""Css.Class.Position(Position.Relative)"">
			<FormInputText @bind-Value=""LastName""/>
			<ValidationTooltip For=""()=>LastName""/>
		</Column>					
		<Column Col=""Col.Is4"" CssClass=""Css.Class.Position(Position.Relative)"">
			<FormInputText @bind-Value=""UserName""/>
			<ValidationTooltip For=""()=>UserName""/>
		</Column>			
		<Column Col=""Col.Is8"" CssClass=""Css.Class.Position(Position.Relative)"">
			<FormInputText @bind-Value=""Address""/>
			<ValidationTooltip For=""()=>Address""/>
		</Column>	
		<Column Col=""Col.Is4"" CssClass=""Css.Class.Position(Position.Relative)"">
			<FormSelect @bind-Value=""State"">
				<option selected>Choose one state...</option>
				<option value=""..."">...</option>
			</FormSelect>
			<ValidationTooltip For=""()=>State""/>
		</Column>
		<Column Col=""Col.Is12"">
			<Button Color=""Color.Primary"" type=""submit"">Submit Form</Button>
		</Column>
	</Row>
</Form>
```
			")
		</Code>
	</Demo>
		<Demo Title="Callbacks">
		<Description>
			<code>OnValidSubmit</code> is called when validation is passed.
		</Description>
		<Run>
			<Form Model="model" OnValidSubmit="@(e=>JS.InvokeVoidAsync("alert","form is submit"))">	
				<DataAnnotationsValidator/>
				<FormInputText @bind-Value="model.UserName"/>
				<ValidationFeedback For="()=>model.UserName"/>
					<br />
				<FormInputPassword @bind-Value="model.Password"/>
				<ValidationFeedback For="()=>model.Password"/>
					<br />
				<Button Color="Color.Dark" type="submit">Submit</Button>
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Form Model=""model"" OnValidSubmit=""@(e=>JS.InvokeVoidAsync(""alert"",""form is submit""))"">	
	<DataAnnotationsValidator/>			
	<FormInputText @bind-Value=""model.UserName""/>
	<ValidationFeedback For=""()=>model.UserName""/>

	<FormInputPassword @bind-Value=""model.Password""/>
	<ValidationFeedback For=""()=>model.Password""/>

	<Button Color=""Color.Dark"" type=""submit"">Submit</Button>
</Form>
```
			")
		</Code>
	</Demo>
</Pager>
@inject IJSRuntime JS
@code{
	[Display(Name ="User Name")]
	[Required(ErrorMessage ="{0} is required")]
	public string UserName { get; set; }

	[Display(Name ="Address")]
	[Required(ErrorMessage ="{0} is required")]
	public string Address { get; set; }	

	[Display(Name ="First Name")]
	[Required(ErrorMessage ="{0} is required")]
	public string FirstName { get; set; }	
	[Display(Name ="Last Name")]
	[Required(ErrorMessage ="{0} is required")]
	public string LastName { get; set; }	

	[Display(Name ="State")]
	[Required(ErrorMessage ="{0} is required")]
	public string State { get; set; }	


	[Display(Name ="Gender")]
	[Required(ErrorMessage ="Please select one gender")]
	public int Gender { get; set; }	

	[Display(Name ="Agree to terms and conditions")]
	[Checked(ErrorMessage ="You must agree before submitting.")]
	public bool Agree { get; set; }


	[Display(Name ="Agree to terms and conditions")]
	[Checked(ErrorMessage ="You must agree before submitting.")]
	public bool TermConditions { get; set; }

	UserModel model = new();
	class UserModel{
	[Display(Name ="User Name")]
	[Required(ErrorMessage ="{0} is required")]
	public string UserName { get; set; }
	[Display(Name ="Password")]
	[Required(ErrorMessage ="{0} is required")]
	public string Password { get; set; }
	}
}